<template>
  <div>
    <p class="item">交易数据</p>
    <el-row :gutter="20" id="content1">
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="background: #43cbee">
          <p class="orders">订单</p>
          <p class="data">236<span>+1.2%</span></p>
          <p class="contrast">与昨日对比得出(+50单)</p>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="background: #2ade9e">
          <p class="orders">成交额</p>
          <p class="data">3245<span>+1.9%</span></p>
          <p class="contrast">与昨日对比得出(+502元)</p>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="background: #f88681">
          <p class="orders">浏览量</p>
          <p class="data">5688<span>+1.2%</span></p>
          <p class="contrast">与昨日对比得出(+48人)</p>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple" style="background: #c3ace4">
          <p class="orders">待付款订单</p>
          <p class="data">15<span>+10%</span></p>
          <p class="contrast">与昨日对比得出(+5单)</p>
        </div>
      </el-col>
    </el-row>
    <p class="item">
      实时数据<span>&emsp;/&emsp;更新时间:2022.06.05 14:58</span>
    </p>
    <el-row :gutter="24" id="content">
      <el-col :span="18"
        ><div
          class="grid-content bg-purple"
          id="box1"
          style="background: white"
      /></el-col>
      <el-col :span="6"
        ><div
          class="grid-content bg-purple"
          id="box2"
          style="background: white"
      /></el-col>
    </el-row>
    <el-row :gutter="4" id="content2">
      <el-col :span="12"
        ><div class="grid-content bg-purple" id="box3"
      /></el-col>
      <el-col :span="12"
        ><div class="grid-content bg-purple" id="box4">
          <p class="more">
            订单消息
            <span>更多></span>
          </p>
          <div>
            <div class="cen">
              <p>
                用户已付款请尽快处理 <span>红色/100ML</span>
                <i>查看详情</i>
              </p>
              <p
                style="
                  color: #ccc;
                  border-bottom: 1px solid #ccc;
                  padding: 5px 0;
                "
              >
                2020-11-18 20:23
              </p>
            </div>
            <div class="cen">
              <p>
                用户给你发送了消息请尽快处理
                <i>查看详情</i>
              </p>
              <p
                style="
                  color: #ccc;
                  border-bottom: 1px solid #ccc;
                  padding: 5px 0;
                "
              >
                2020-11-18 20:23
              </p>
            </div>
            <div class="cen">
              <p>
                用户已催发货请尽快处理 <span>全自动/充电式</span>
                <i>查看详情</i>
              </p>
              <p
                style="
                  color: #ccc;
                  border-bottom: 1px solid #ccc;
                  padding: 5px 0;
                "
              >
                2020-11-18 20:23
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
  setup() {
    onMounted(() => {
      const box1 = document.getElementById("box1");
      if (box1) {
        var myChart = echarts.init(box1);
        var option;

        option = {
          title: {
            text: "成交金额",
          },
          tooltip: {
            trigger: "axis",
          },

          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
              "19:00",
              "20:00",
              "21:00",
              "22:00",
              "23:00",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "昨日成交金额",
              type: "line",
              smooth: true,
              areaStyle: {
                shadowColor: "rgba(255, 245, 230, 0.2)",
                shadowBlur: 100,
              },

              data: [
                2500, 7000, 3000, 9000, 5000, 4000, 6000, 5000, 5490, 4500,
                6400, 6500,
              ],
            },
            {
              name: "今日成交金额",
              type: "line",
              smooth: true,
              data: [
                2700, 4000, 8000, 2689, 4600, 5701, 4902, 4308, 6491, 4004,
                6900, 5700,
              ],
              areaStyle: {
                shadowColor: "rgba(255, 245, 230, 0.2)",
                shadowBlur: 100,
              },
            },
          ],
        };

        option && myChart.setOption(option);
      }
    });
    onMounted(() => {
      const box2 = document.getElementById("box2");
      if (box2) {
        var myChart = echarts.init(box2);
        var option;

        option = {
          gird: {
            bottom: 300,
          },
          title: {
            text: "热销比例",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            data: [
              {
                name: "篮球鞋",
                icon: "circle",
              },
              {
                name: "高跟鞋",
                icon: "circle",
              },
              {
                name: "",
              },
              {
                name: "休闲鞋",
                icon: "circle",
              },

              {
                name: "运动鞋",
                icon: "circle",
              },
            ],

            itemGap: 30,
            left: "center",
            bottom: 30,
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["50%", "80%"],
              center: ["50%", "40%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 3000, name: "篮球鞋" },
                { value: 2000, name: "高跟鞋" },
                { value: 1000, name: "休闲鞋" },
                { value: 500, name: "运动鞋" },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    });
    onMounted(() => {
      const box3 = document.getElementById("box3");
      if (box3) {
        var myChart = echarts.init(box3);
        var option;
        const data = [
          {
            name: "篮球鞋",
            value: 46,
          },
          {
            name: "休闲鞋",
            value: 54,
          },
        ];
        option = {
          graphic: [
            {
              //环形图中间添加文字
              type: "text", //通过不同top值可以设置上下显示

              left: "10%",
              top: "43%",
              style: {
                text: "46%",
                textAlign: "center",
                fill: "blue", //文字的颜色
                width: 30,
                height: 30,
                fontSize: 40,
                fontFamily: "Microsoft YaHei",
              },
            },
            {
              //环形图中间添加文字
              type: "text", //通过不同top值可以设置上下显示
              left: "44%",
              top: "43%",
              style: {
                text: "46%",
                textAlign: "center",
                fill: "blue", //文字的颜色
                width: 30,
                height: 30,
                fontSize: 40,
                fontFamily: "Microsoft YaHei",
              },
            },
            {
              //环形图中间添加文字
              type: "text", //通过不同top值可以设置上下显示
              left: "77%",
              top: "43%",
              style: {
                text: "46%",
                textAlign: "center",
                fill: "blue", //文字的颜色
                width: 30,
                height: 30,
                fontSize: 40,
                fontFamily: "Microsoft YaHei",
              },
            },
          ],

          title: [
            {
              text: "用户终端分布",
              top: 20,
              left: 20,
            },

            {
              text: "92,900",
              subtext: "ios",
              itemGap: 2,
              left: "16.67%",
              top: "74%",
              textAlign: "center",
              textStyle: {
                fontFamily: "微软雅黑",
                fontSize: 24,
                color: "black",
              },
              subtextStyle: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "blue",
              },
            },
            {
              text: "92,900",
              subtext: "Android",
              itemGap: 2,
              top: "74%",
              left: "50%",

              textAlign: "center",
              textStyle: {
                fontFamily: "微软雅黑",
                fontSize: 28,
                color: "black",
              },
              subtextStyle: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "blue",
              },
            },
            {
              text: "92,900",
              subtext: "PC/MAC",
              left: "83.33%",
              itemGap: 2,
              top: "74%",

              textAlign: "center",
              textStyle: {
                fontFamily: "微软雅黑",
                fontSize: 28,
                color: "black",
              },
              subtextStyle: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "blue",
              },
            },
          ],
          series: [
            {
              type: "pie",

              center: ["50%", "50%"],
              radius: ["53%", "50%"],

              data: data,
              label: {
                normal: {
                  show: false, //设为false

                  position: "center", //center表示文本显示位置为内部
                },

                position: "outer",
                alignTo: "none",
                bleedMargin: 5,
              },
              left: 0,
              right: "66.6667%",
              top: 0,
              bottom: 0,
            },
            {
              type: "pie",

              center: ["50%", "50%"],
              radius: ["53%", "50%"],
              data: data,
              label: {
                normal: {
                  show: false, //设为false
                  position: "center", //center表示文本显示位置为内部
                },
                position: "outer",
                alignTo: "labelLine",
                bleedMargin: 5,
              },
              left: "33.3333%",
              right: "33.3333%",
              top: 0,
              bottom: 0,
            },
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["53%", "50%"],
              data: data,
              label: {
                normal: {
                  show: false, //设为false
                  position: "center", //center表示文本显示位置为内部
                },
                position: "outer",
                alignTo: "edge",
                margin: 20,
              },
              left: "66.6667%",
              right: 0,
              top: 0,
              bottom: 0,
            },
          ],
        };

        option && myChart.setOption(option);
      }
    });

    return {
      DataView,
    };
  },
};
</script>

<style lang="less" scoped>
.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid #395aff;
  span {
    font-size: 12px;
  }
}
#content1 {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    margin-bottom: 20px;
    border-radius: 4px;
    min-height: 157px;
    padding: 20px 20px;
    color: white;
    .orders {
      font-size: 20px;
      margin-bottom: 15px;
      font-weight: bolder;
    }
    .data {
      font-size: 24px;
      font-weight: bolder;

      span {
        font-size: 12px;
        font-weight: none;
      }
      margin-bottom: 15px;
    }
    .contrast {
      font-size: 16px;
    }
  }
}
#content {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 444px;
    background: white;
    margin-bottom: 20px;
  }
}
#content2 {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 237px;
    background: white;
  }
}
#box4 {
  .more {
    font-size: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bolder;
    span {
      font-size: 12px;
      text-align: right;
      float: right;
      color: #ccc;
    }
  }
  .cen {
    font-size: 14px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;

    span {
      font-size: 12px;
      color: #ccc;
      margin-left: 20px;
    }
    i {
      float: right;
      color: #3080ee;
    }
  }
}
</style>
